<template>
   <el-backfoot :right="101" :bottom="101" />
   <el-backtop :right="100" :bottom="100"/>
  <el-container class="about-container">
    <!-- 顶部标题部分 -->
    <el-header>
      <el-row type="flex" justify="center">
        <el-col :span="20">
          <h1 class="page-title">关于我们：智思云教育平台</h1>
        </el-col>
      </el-row>
    </el-header>
    <!-- 主体内容部分 -->
    <el-main>
      <el-row>
        <el-col :span="8">
          <div class="company-info">
            <h2 style="color:lightseagreen">智思云平台简介</h2>
           <p>智思云教育网是一家致力于提供高质量在线教育资源和服务的平台。它旨在通过先进的互联网技术和丰富的教育资源，帮助广大学生、教师和家长提升学习效率和教学质量。
            智思云教育网提供了从小学到高中的全科目课程资源，涵盖语文、数学、英语、物理、化学等多个学科。平台根据每个学生的学习情况和需求，提供个性化的学习方案和推荐课
            程。通过智能评估系统，帮助学生发现学习中的薄弱环节。
           </p> 
          </div>
        </el-col>
        <el-col :span="8">
          <div class="vision-section">
            <h2 style="color:lightseagreen">发展愿景</h2>
            <p>智思云教育网致力于成为国内领先的在线教育平台，通过技术创新和优质服务，推动教育公平，让更多的学生享受到优质的教育资源。未来，平台将继续拓展课程种类
              ，优化用户体验，为广大学生和家庭提供更加全面、便捷的教育服务。智思云教育网汇聚了一批经验丰富、教学水平高的优秀教师，他们不仅具备扎实的专业知识，还擅
              长激发学生的学习兴趣。
            </p>
            <el-tag type="success" effect="dark" v-for="value in coreValues" :key="value">{{ value }}</el-tag>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="team-section">
            <h2 style="color: lightseagreen;">核心团队</h2>
            <div class="block text-center">
              <span class="demonstration">
              </span>
               <el-carousel :interval="3000"  style="height: 215px;width: 400px;margin-top: -10px;margin-left: -15px;">
                  <el-carousel-item v-for="item in arriImg" :key="item">
                  <el-image :src="item" style="height: 310px;width:auto;"></el-image>
               </el-carousel-item>
              </el-carousel>
         </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="contact-section">
            <h2>联系我们</h2>
            <el-row type="flex" justify="space-around">
              <el-col :span="8">
                <el-icon><location /></el-icon>
                <p>公司地址：贵州贵阳</p>
              </el-col>
              <el-col :span="8">
                <el-icon><phone /></el-icon>
                <p>联系电话:400-123-4567</p>
              </el-col>
              <el-col :span="8">
                <el-icon><mail /></el-icon>
                <p>电子邮箱:support@zhisiyun.com</p>
              </el-col>
            </el-row>
            <el-form :model="contactForm" label-width="80px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="姓名">
                    <el-input v-model="contactForm.name"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="邮箱">
                    <el-input v-model="contactForm.email"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="留言">
                    <el-input type="textarea" v-model="contactForm.message"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-button type="primary" @click="submitContactForm">提交</el-button>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-col>
      </el-row>
      <el-divider />
      <div class="objkj">
           <ul style="margin-left: -1150px;">
            <li> <img src="@/assets/LOGO.png" alt="Logo" class="menu-logos" style="cursor: pointer" ></li>
            <li style="color: skyblue;font-size: 17px;">让教与学更高效</li>
            <li style="color: #000; ">⁃汇聚优质资源</li>
            <li style="color: #000; ">⁃服务智慧教学</li>
            <li style="color: #000; ">⁃赋能行业发展</li>
           </ul>
           <ul style="margin-top: -200px;margin-left: -800px;">
            <li style="font-weight: bold;font-size: 18px;cursor: pointer;">
              新手帮助
            </li>
            <li style="margin-top: 25px;">
              <el-button type="text" class="hover-text">在线客服</el-button>
            </li>
            <li>
              <el-button type="text" class="hover-text">提现流程</el-button>
            </li>
            <li>
              <el-button type="text" class="hover-text">赚取现金</el-button>
            </li>
            <li>
              <el-button type="text" class="hover-text">视频帮助</el-button>
            </li>
           </ul>
           <ul style="margin-top: -200px;margin-left: -450px;">
            <li style="font-weight: bold;font-size: 18px;cursor: pointer;">
            常见问题
            </li>
            <li style="margin-top: 25px;">
              <el-button type="text" class="hover-text">账号问题</el-button>
            </li>
            <li>
              <el-button type="text" class="hover-text">上传问题</el-button>
            </li>
            <li>
              <el-button type="text" class="hover-text">下载问题</el-button>
            </li>
            <li>
              <el-button type="text" class="hover-text">充值问题</el-button>
            </li>
           </ul>
           <ul style="margin-top: -200px;margin-left: -100px;">
            <li style="font-weight: bold;font-size: 18px;cursor: pointer;">
            会员须知
            </li>
            <li style="margin-top: 25px;">
              <el-button type="text" class="hover-text">高级会员</el-button>
            </li>
            <li>
              <el-button type="text" class="hover-text">轻享会员</el-button>
            </li>
            <li>
              <el-button type="text" class="hover-text">教师认证</el-button>
            </li>
            <li>
              <el-button type="text" class="hover-text">会员体系</el-button>
            </li>
           </ul>
           <ul style="margin-top: -200px;margin-left: 250px;">
            <li style="font-weight: bold;font-size: 18px;cursor: pointer;">
            互动交流
            </li>
            <li style="margin-top: 25px;">
              <el-button type="text" class="hover-text">留言中心</el-button>
            </li>
            <li>
              <el-button type="text" class="hover-text">意见反馈</el-button>
            </li>
            <li>
              <el-button type="text" class="hover-text">留言状态</el-button>
            </li>
            <li>
              <el-button type="text" class="hover-text">留言问题</el-button>
            </li>
           </ul>
           <ul style="margin-top: -200px;margin-left: 600px;">
            <li style="font-weight: bold;font-size: 18px;cursor: pointer;">
            产品服务
            </li>
            <li style="margin-top: 25px;">
              <el-button type="text" class="hover-text">网校通</el-button>
            </li>
            <li>
              <el-button type="text" class="hover-text">e网/卷通</el-button>
            </li>
            <li>
              <el-button type="text" class="hover-text">学科书城</el-button>
            </li>
            <li>
              <el-button type="text" class="hover-text">开放平台</el-button>
            </li>
           </ul>
           <ul style="margin-top: -200px;margin-left: 950px;">
            <li style="font-weight: bold;font-size: 18px;cursor: pointer;">
            客服热线
            </li>
            <li style="margin-top: 25px;">
              <el-button type="text" class="hover-text">400-900-2556</el-button>
            </li>
            <li>
              <el-button type="text" class="hover-text">QQ：712321494</el-button>
            </li>
            <li>
              <el-button type="text" class="hover-text">工作日：8:30-18:00</el-button>
            </li>
            <li>
              <el-button type="text" class="hover-text"></el-button>
            </li>
           </ul>
           <el-divider ></el-divider>
           <p style="margin-left: -60px;">友情链接：
              <el-button type="text" class="hover-text" style="margin-left: 10px;"> 组卷网</el-button>
              <el-button type="text" class="hover-text">中考真题</el-button>
              <el-button type="text" class="hover-text">高考真题</el-button>
              <el-button type="text" class="hover-text">电子课本</el-button>
              <el-button type="text" class="hover-text">学科网招聘</el-button>
              <el-button type="text" class="hover-text">AI职教</el-button>
              <el-button type="text" class="hover-text">e课堂</el-button>
              <el-button type="text" class="hover-text">国家公务员考试</el-button>
              <el-button type="text" class="hover-text">环球职业教育网</el-button>
              <el-button type="text" class="hover-text">高考网</el-button>
              <el-button type="text" class="hover-text">考试吧</el-button>
              <el-button type="text" class="hover-text">新东方在线</el-button>
              <el-button type="text" class="hover-text">233网校</el-button>
              <el-button type="text" class="hover-text">中华网考试</el-button>
              <el-button type="text" class="hover-text">国家公务员考试</el-button>
              <br/>
              <el-button type="text" class="hover-text" style="margin-left: -255px;">高三网</el-button>
              <el-button type="text" class="hover-text">可可英语</el-button>
              <el-button type="text" class="hover-text">公务员考试网</el-button>
              <el-button type="text" class="hover-text">中考网</el-button>
              <el-button type="text" class="hover-text">注册会计师考试</el-button>
              <el-button type="text" class="hover-text">律师</el-button>
              <el-button type="text" class="hover-text">爱问共享资料</el-button>
              <el-button type="text" class="hover-text">原创力文档</el-button>
              <el-button type="text" class="hover-text">法律咨询网</el-button>
              <el-button type="text" class="hover-text">高考网</el-button>
              <el-button type="text" class="hover-text">考试吧</el-button>
              <el-button type="text" class="hover-text">法律咨询</el-button>
              <el-button type="text" class="hover-text">公务员期刊网</el-button>
            </p>
            <el-divider ></el-divider>
            <p style="padding: 20px;">
              <el-button type="text" class="hover-text">关于我们</el-button>
              <el-divider style=" border-color: #ff5722;" direction="vertical" />
              <el-button type="text" class="hover-text">网站导航</el-button>
              <el-divider style=" border-color: #ff5722;" direction="vertical" />
              <el-button type="text" class="hover-text">网站地图</el-button>
              <el-divider style=" border-color: #ff5722;" direction="vertical" />
              <el-button type="text" class="hover-text">版权声明</el-button>
              <el-divider style=" border-color: #ff5722;" direction="vertical" />
              <el-button type="text" class="hover-text">证照信息</el-button>
              <el-divider style=" border-color: #ff5722;" direction="vertical" />
              <el-button type="text" class="hover-text">帮助中心</el-button>
              <el-divider style=" border-color: #ff5722;" direction="vertical" />
              <el-button type="text" class="hover-text">壁纸下载</el-button>
              <el-divider style=" border-color: #ff5722;" direction="vertical" />
              <el-button type="text" class="hover-text">证书查询</el-button>
              <el-divider style=" border-color: #ff5722;" direction="vertical" />
              <el-button type="text" class="hover-text">版权保护</el-button>
            </p>
            <p>
              <ul>
                <li>
                  违法和不良信息举报电话:400-102-2000   举报邮箱:support@zhisiyun.com
                </li>
               <li style="margin-top: 30px;">
                智思云网 zxxk.com  版权所有 京ICP备12013499号 京ICP证080135号 北京市公安局海淀分局备案号:1101081948
               </li>
              </ul>
            </p> 
             <el-divider ></el-divider>
            <p>
              <el-icon :size="40">
                <img :src="require('../assets/25.png')" alt="" style="width: auto; height:auto;margin-left:-850px;margin-top: 150px;border-radius: 5px;cursor: pointer" />
             </el-icon>
             <el-icon :size="40">
                <img :src="require('../assets/26.png')" alt="" style="width: auto; height:auto;margin-left:-600px;margin-top: 150px;border-radius: 5px;cursor: pointer" />
             </el-icon> 
             <el-icon :size="40">
                <img :src="require('../assets/27.png')" alt="" style="width: auto; height:auto;margin-left:-350px;margin-top: 150px;border-radius: 5px;cursor: pointer" />
             </el-icon> 
             <el-icon :size="40">
                <img :src="require('../assets/28.png')" alt="" style="width: auto; height:auto;margin-left:-100px;margin-top: 150px;border-radius: 5px;cursor: pointer" />
             </el-icon> 
             <el-icon :size="40">
                <img :src="require('../assets/29.png')" alt="" style="width: auto; height:auto;margin-left:150px;margin-top: 150px;border-radius: 5px;cursor: pointer" />
             </el-icon> 
             <el-icon :size="40">
                <img :src="require('../assets/30.png')" alt="" style="width: auto; height:auto;margin-left:400px;margin-top: 150px;border-radius: 5px;cursor: pointer" />
             </el-icon> 
             <el-icon :size="40">
                <img :src="require('../assets/31.png')" alt="" style="width: auto; height:auto;margin-left:650px;margin-top: 150px;border-radius: 5px;cursor: pointer" />
             </el-icon> 
             <el-icon :size="40">
                <img :src="require('../assets/32.png')" alt="" style="width: 100px; height:auto;margin-left:900px;margin-top: 150px;border-radius: 5px;cursor: pointer" />
             </el-icon>  
            </p> 
            </div>
    </el-main>
  </el-container>
</template>
<script>
export default {
  name: 'AboutPage',
  data() {
    return {
      arriImg:[
          require("../assets/1.png"),
          require("../assets/2.png"),
          require("../assets/3.png"),
          require("../assets/4.png"),
          require("../assets/5.png"),
          require("../assets/6.png"),
        ],
      coreValues: ['诚信', '创新', '协作', '卓越'],
      contactForm: {
        name: '',
        email: '',
        message: ''
      }
    };
  },
  methods: {
    submitContactForm() {
      // 这里可以添加实际的提交逻辑，比如发送 API 请求
      console.log('提交联系表单：', this.contactForm);
      // 简单的提示，实际中可替换为更友好的用户反馈
      alert('感谢您的留言！');
    }
  }
};
</script>
<style scoped>
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.hover-text {
  color: #000; /* 默认字体颜色 */
  transition: color 0.2s; /* 添加过渡效果，使颜色变化更平滑 */
}

.hover-text:hover {
  color: #0e93f36b; /* 鼠标划过时的字体颜色 */
}
.menu-logos {
  width: 60px; /* 调整Logo的宽度 */
  height: auto; /* 保持比例 */
  margin-right: 0; /* Logo与文字之间的间距 */
  margin-top: 0px;
  }
   ul {
      list-style-type: none; /* 移除默认的列表样式 */
      padding:0; /* 移除默认的内边距 */
      line-height: 30px;
    }
.objkj{
    height: 780px;
    width: auto;
    background-color:white;
  }
.about-container {
  background-color:  #dca3aa23;
  min-height: 150vh;
  width: 142vh;
  margin-left: 165px;
}

.page-title {
  font-family: 'Arial', sans-serif;
  color: #333;
  margin-bottom: 20px;
}

.company-info,
.vision-section,
.team-section,
.contact-section {
  background-color: white;
  padding: 20px;
  margin: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.team-member-card {
  display: flex;
  align-items: center;
}

.member-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 10px;
}

.member-info {
  flex: 1;
}

.member-name {
  font-weight: bold;
}

.contact-section el-form {
  margin-top: 20px;
}

</style>